import React from 'react';
import classNames from 'classnames';
import Checkbox from './Checkbox';
import Dropdown from '../Dropdown';
import Icon from '../Icon';

class Header extends React.Component {
    displayName = 'Header';

    state = {
        _id: 1,
        activeFilter: '***'
    }

    renderColGroup () {
        const {columns, overflowY} = this.props;
        const group = columns.map(column => {
            if (column.type === 'checkbox') {
                column.width = column.width || 53;
            }
            if (column._hide) {
                column.width = 0;
            }
            return <col key={column.name || column.type} width={column.width}/>;
        });
        if (overflowY) {
            group.push(<col width={overflowY} key='scroll' />);
        }
        return <colgroup>
            {group}
        </colgroup>;
    }

    onSort = (column, type) => {
        if (column._sortType === type) {
            column._sortType = '';
        } else {
            column._sortType = type;
        }
        if (this.props.onSort) {
            this.props.onSort(column, column._sortType);
        }
    }

    onHandleFilter = (column, filterItem) => {
        this.setState({
            activeFilter: filterItem.id
        });
        if (this.props.onFilter) {
            this.props.onFilter(column, filterItem);
        }
    }

    renderThs () {
        const {columns, overflowY, onChange, datum} = this.props;
        const ths = columns.map(column => {
            let text = column.text;
            if (column.type === 'checkbox') {
                column.width = column.width || 53;
                text = <Checkbox header datum={datum} onChange={onChange} />;
            }
            let filters = column.filters;
            filters = filters ? filters.slice() : null;
            filters && filters.unshift({
                id: '***',
                text: '全部'
            });
            return <th key={column.name || column.type}>
                <div className='cm-table-cell' style={{display: column._hide ? 'none' : 'block'}}>
                    <span>{text}</span>
                    {
                        column.sort
                            ? <span className='cm-table-sort'>
                                <Icon name='chevron-up' className={column._sortType === 'asc' ? 'cm-table-sort-active' : ''} onClick={this.onSort.bind(this, column, 'asc')}/>
                                <Icon name='chevron-down' className={column._sortType === 'desc' ? 'cm-table-sort-active' : ''} onClick={this.onSort.bind(this, column, 'desc')}/>
                            </span>
                            : null
                    }
                    {
                        filters
                            ? <Dropdown className='cm-table-filter-list' data={filters} trigger='click' active={this.state.activeFilter} transfer onSelect={this.onHandleFilter.bind(this, column)}>
                                <span className='cm-table-filter'>
                                    <Icon name='filter' />
                                </span>
                            </Dropdown>
                            : null
                    }
                </div>
            </th>;
        });
        if (overflowY) {
            ths.push(<th key='scroll'>
                <div className='cm-table-cell'>
                    <span>&nbsp;</span>
                </div>
            </th>);
        }
        return <thead>
            <tr>
                {ths}
            </tr>
        </thead>;
    }

    componentDidMount () {
        this.updateWidth();
    }

    updateWidth () {
        const {columns} = this.props;
        const rect = this.headerWrap.getBoundingClientRect();
        this.table.style.width = `${rect.width}px`;
    }

    componentDidUpdate () {
        this.updateScroll();
    }

    updateScroll () {
        const {scroll} = this.props;
        if (this.headerWrap && scroll) {
            this.headerWrap.scrollLeft = scroll.left;
        }
    }

    render () {
        const {className} = this.props;
        const clazzName = classNames('cm-table-header', className);
        return <div className={clazzName} ref={f => this.headerWrap = f}>
            <table cellSpacing={0} cellPadding={0} border={0} ref={f => this.table = f}>
                {this.renderColGroup()}
                {this.renderThs()}
            </table>
        </div>;
    }
}

export default Header;
